<template>
  <div id="imp_box">
      <div></div>
      <div class="s_box">
          <router-link v-for="(e, i) in msg" :to="e.href" :key="e.title" :style="{top: (state[i] ? state[i].pos * fs * 1.34 + 'px' : '0px'), opacity: (state[i] ? state[i].opacity : 1)}" :class="{animate: (state[i] ? state[i].animate : false)}" tag="div">{{e.title}}</router-link>
      </div>
  </div>
</template>
<script>
export default {
  data () {
      return {
          state: [],
          fs: parseFloat(window.getComputedStyle(document.documentElement)["fontSize"])
      }
  },
  props: ['msg'],
  mounted () {
      this.msg.forEach((e, i) => {
          this.state.push({
              pos: i,
              opacity: 1,
              animate: false
          })
      })
      setInterval(function(){
          this.state.forEach((e, i, arr) => {
              e.animate = true
              if(e.pos - 1 < -1){
                  e.animate = false
                  e.pos = arr.length - 2
              }
              else{
                  e.pos--
              }
              if(e.pos == 0){
                  e.opacity = 1
              }
              else{
                  e.opacity = 0
              }
          })
      }.bind(this), 1000 * 3)
  }
}
</script>
<style scoped>
#imp_box{
    position: relative;
    height: 1.45rem;
    padding: 0.23rem 0 0.28rem;
    overflow: hidden;
}
#imp_box>div:nth-child(1){
    width: 1.9rem;
    height: 100%;
    border-right: 0.01rem solid #e6e6e6;
    background-size: 1.26rem 0.26rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('~@/assets/news/today.png');
}
.s_box{
    position: absolute;
    top: 0.23rem;
    right: 0.35rem;
    width: 5rem;
    height: 100%;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.36rem;
    overflow: hidden;
}
.s_box>div{
    position: absolute;
    padding-top: 0.2rem;
    width: 100%;
    height: 100%;
}
.animate{
    transition: all 0.8s;
}
</style>
